INSTALL AND UPDATE

---

Install

---

Step 1. Log into your WordPress Admin area.
Step 2. Look down the left-hand column for Plugins and then click on the button Add new :

Step 3. On the Add new page, click Upload Plugin button.

Step 4. On the Upload page, click Browse to browse for the plugin installation file in [path-to-your-downloaded-package]/Installation File/webba-booking.zip). Click Install Now.
Step 5. After the plugin installation, click Activate Plugin.

Update

---

To get the new update of the plugin you should enter Purchase Code on the Activation section of plugin settings page. If you entered a valid Purchase Code, you will see update notification for Webba Booking plugin on the Plugins page when an update is available :

Click update now to update the plugin. All data and settings will be saved.

THE KEY CONCEPTS

---

Services

---

Service is a main key concept of Webba Booking plugin. It represents information about different areas of company’s activities.
For each service, the administrator sets unique business hours, notification parameters, etc...
Service entity is a base for sharing an access between WordPress users(administrators, editors,contributors, etc..).
For information about operation with services (add, edit, delete) see Services management chapter of this documentation.

Schedules

---

Each service has its own schedule with unique business hours, closed or opened days, closed or opened time slots, appointments.
The schedule can be managed by the administrator or by WordPress user with access to the service of this schedule (more information about access management can be found on Service management section of this documentation).
Webba Booking plugin provides the following functions to work with schedule:

• View days and time slots in special calendar format developed with a to be displayed on any device.
• Close any default date (make it unavailable for booking).
• Open any default date (make it available for booking).
• Close any default time slot (make it unavailable for booking).
• Open any default time slot (make it available for booking).
• View appointments (short and detailed view).
• Delete appointments.
• Add appointments manually.

Appointments

---

Appointment key concept is a part of the schedule. It holds information about :

• Customer name.
• Customer phone.
• Customer E-mail.
• Booked items count.
• Date and time of appointment.
• Comment.

APPOINTMENT BOOKING PROCESS FOR CUSTOMERS

---

WEBBA Booking has two modes (Basic and Extended) for a simple or detailed booking process.

Extended mode

---

Booking process consists of the next steps :
Step 1. Select service :

Step 2. Select date to start search with :

Step 3. Select suitable hours, search and select time :

Step 4. Fill in a form with. (Fields can be customized)

Basic mode

---

Booking process consists of the next steps :
Step 1. Select service :

Step 2. Select date and time :

Step 3. Fill in a form. (Fields can be customized)

Step 4. Click Submit button.

---

Note for both modes:

The booked slot disappeared on successful booking. If many items are available for the reservation, the booked slot will stay, but the count will be reduced.

PayPal

---

If you have activated the PayPal payment in your Service, in both modes (Basic or Extended), then will be displayed the following steps:

Your customer is invited to pay online with Paypal. Once the Pay now with Paypal button is clicked, the payment details are displayed:

The last button I confirm my transaction with PayPal will then redirect your client to Paypal to finalize the payment.

Stripe

---

If you have activated the Stripe payment in your Service, in both modes (Basic or Extended), then will be displayed the following steps:

---

---

The customer is invited to pay with his credit card. As soon as he clicks on the button, the details of the payment will appear.

---

---

After correctly filling in the card data and approving the payment, the payment confirmation message will be displayed.

---

---

Mutiple time slots selection

---

To work with the Mutiple time slots selection you need to go to the Settings page:

Then go to the Mode tab (step 1) and activate it (step 2)

Then click save.

Your customers will then be able to make several reservations in one session. From the first reserved slot, a checkout bar appears. The user will then click there to finalize his multiple time slot selection in only one booking session. Like on the pic below.

---

Multiple services selection

---

In order to use multiple services selection, you need to enable Multiple bookings in one session on Settings page, Mode tab and use [webba_multi_service_booking] as shortcode where you want to diplay your booking form.

Your customers will be prompted to select services like in the pic below:

GETTING STARTED

---

WEBBA Booking settings page consists of the following section :
– General
– Holidays
– Email notifications
– Mode
– Translation
– Appointments
– Paypal
– Backend interface
– Activation

To setup settings :
Go to the Settings page of the plugin by clicking on Settings.

General

---

Step 1. Open General tab.

Step 2. Set the Week starts on. Possible values are Sunday, Monday, WordPress default). When choosing WordPress default, the setup from the general settings of WordPress on the General Settings page will be applied.

Step 3. Enter the Date format. This parameter affects the display of the date on the pages of the plugin (in the admin part and on the pages of your site). If not specified, it’ll be set to a value which is set in the General Settings page of WordPress on the General Settings page. For more details on the date format, see here.

Step 4. Enter the Time format. This setting affects the display of time on the pages of the plugin (in the admin part and on the pages of your site). If not specified, it will be set to a value which is set in the general settings page of WordPress on the General Settings page. For more details on the date format, see here.

Step 5. Set the Timezone. In this setting, you specify the time zone. If your city is not listed, you can select the one nearby with the same time zone as yours.
Note (!) that this setting is recommended for setup before starting and should not be changed during the work process.

Step 6. Set the Phone number mask input. Choose a plugin to be used as a masked input control or leave it disabled if you don't need to use mask input in the phone field of booking form

Step 7. Enter the Phone format. a – Represents an alpha character (A-Z,a-z), 9 – Represents a numeric character (0-9), * – Represents an alphanumeric character (A-Z,a-z,0-9)

Step 8. Set the Phone field is required in the booking form. If set to yes, the customer will be prompted to fill this field if it is empty at the form validation.
Note: If you don't need to get the phone numbers, you can delete this field by creating a CF7 (contact form 7) form with your just needed fields.

Step 9. Set the Show booked time slots to enabled if you want to display booked time slots. That time slot would be unavailable for booking. You can also edit text on Book button and insert placeholders for a name if a person who has booked an appointment and time. For example. 'Booked by #username'. To edit text, go to the translation tab and edit the Booked time slot text parameter.

Step 10. Hide form on booking enabled will hide all the steps of the form once this last is submitted.

Step 11. Check shortcode on booking form initialization. Enable this option to optimize the loading of the booking form. Important: enabling this option may conflict with some of the WordPress editors.

Step 12. Show cancel button. Enable this option to show cancel button on the steps of the booking process. To set the text of the Cancel button, please, edit the Booking cancel button text option on the Translation tab of the Settings page.

Step 13. Disable booked dates in calendar. This will make unavailable all the days that are fully booked in the popup calendar where people select a date for their appointment

Step 14. Set the Time slot time string. This parameter determines the format of time displayed in the time slot block. For ex. if the value is Start, the time will be displayed as 10 PM, if the value is Start - end, the time will be displayed as 10 PM - 11 PM.

Step 15. Set the Time slot format. If you want to display time, availability and Book button set the Show details and BOOK button value, if you want to display only time, set the Show time button only value.

Step 16. Show local time in time slots Enable this option if you need to show customers their local time. Please note, if you enable this option, local time will be added to to current website time, not instead of it. Enabled (show only local time) will only display the local time of your customer.

Step 17. CSV export delimiter. Setup the delimiter to be used in csv-export. default setting, compatitble with the most of csv editors, such as OpenOffice or Microsoft Office is comma. At the same time, if there is comma in your date formats, the csv output will be broken. For this reason, you need to setup semicolon as a delimiter.

Step 18. jQuery no-conflict mode. Enable this option to use jQuery in no-conflict mode in frontend. Important: enabling this option may cause a conflict with other plugins. please check your website functionalities after enabling this option.

Step 19. Load pickadate javascript. Set "no" if there are plugins in your WordPress that using the pickadate date picker.

Step 20. Allow cancel or approve by link. Set "yes" to allow administrator to cancel or approve appointment with the link sent in notification.

Step 21. Tax used for #total_amount placeholder. Choose here if you want to include a tax and for what mode of payment, Stripe or Paypal.

Step 22. Coupons Activate the coupon option here if you want to use it. It will then be created on the Coupons page and assigned to the services concerned.

Step 23. The number of digits in the fractional part of the price. Self-explanatory.

---

Step 24. Scroll container . This option handle jQuery selector for the scroll effect of the booking form. To use by developers only.

---

Holidays settings

---

Step 1. Holidays Open tab.

Step 2. Set the Holidays. To set Holidays you need to click on the Holidays field and select the dates in the dialog box. Note that this setting is common to all services created in a plugin, thus, in future, you may cancel any holiday at the level of service, or vice versa, make any day a holiday.

---

Email notifications and reminders settings

---

Step 1 Open Email notifications tab.

Step 2. Set Multiple booking notification mode (customer). Choose whether you prefer to send the customer a notification for each time slot or only one for all the selected timeslots (in case you have enabled Multiple bookings in one session in the Mode tab). As a matter of fact, it may be more convenient to group all and send just one notification in this case.

Step 3. Set Multiple booking notification mode (admin). Choose whether you prefer to send the admin a notification for each time slot or only one for all the selected timeslots  (in case you have enabled Multiple bookings in one session in the Mode tab). 

Step 4. Set the Send customer an email  (on booking). Check the box if you want to send an email to a customer on booking.

Step 5. Set the Attach iCal file to the notification (customer). Self-explanatory. Notice: the time zone in the iCal file will be the same as in the Webba time zone setting.

Step 6. Enter the Subject of an email to a customer  (on booking). You can compose a sentence with the available placeholders (#appointment_time, #appointment_day, #service_name).
If Multiple bookings in one session is enabled in Mode tab, specify the subject of the letter that will be sent to the customer (up to 100 characters). For example, ‘You have successfully booked an appointment’ (placeholders are not available in this case).

Step 7. Enter the Message to a customer  (on booking). Use the text editor to edit the email message. To insert a placeholder directly related to the client or service data, use the special buttons :
Service Name, Customer Name, Booking date, Booking time, Customer phone, Customer email, Customer comment, Items count, and so on.

In the image below, you will find an illustration of the case Multiple bookings in one session with the placeholder Create loop (for customer's notifications only).
Think of including a <br /> in the loop for a better formatting.

Step 7. Set the Send customer an email (on approval). Check the box if you want to send an email to a when the status of an appointment changed from Awaiting approval or Paid (awaiting approval) to Approved or Paid (approved). The email is sent when an administrator of the service change the status of the appointment manually in the appointment table.

Step 8. Enter the Subject of an email to a customer (on approval). Specify the subject of the email that will be sent to the customer (up to 100 characters). For example, ‘Your booking has been approved.’ You can also include placeholders.

Step 9. Enter the Message to a customer (on approval). Use the text editor to edit the email message. To insert a placeholder directly related to the client or service data, use the special buttons : Service Name, Customer Name, Booking date, Booking time, Customer phone, Customer email, Customer comment, Items count, etc.

Step 10. Set the Send administrator an email (on cancellation). Check the box if you want to send an email to the administrator to notify him about the cancelation.

Step 11. Multiple booking cancellation notification mode (admin).
Choose whether you want to group cancellations or send an email for each cancellation

Step 12. Enter the Subject of an email to administrator (on cancellation). Specify the subject of the letter that will be sent to the customer from the group (up to 100 characters). For example, ‘Appointment notification’. You can also use placeholders.

Step 13. Enter the Message to administrator (on cancellation). Use the text editor to edit the email message. To insert a placeholder directly related to the client or service data, use the special buttons :
Service Name, Customer Name, Group Customer Name, Booking date, Booking time, Customer phone, Customer email, Customer comment,Items count.

Step 14. Set the Send customer an email (on cancellation). Check the box if you want to send an email to the customer to notify him about the cancelation.

Step 15. Multiple booking cancellation notification mode (admin).
Choose whether you want to group cancellations or send an email for each cancellation

Step 16. Enter the Subject of an email to customer (on cancellation). Specify the subject of the letter that will be sent to the customer from the group (up to 100 characters). For example, ‘Appointment notification’. You can also use placeholders.

Step 17. Enter the Message to customer (on cancellation). Use the text editor to edit the email message. To insert a placeholder directly related to the client or service data, use the special buttons :
Service Name, Customer Name, Group Customer Name, Booking date, Booking time, Customer phone, Customer email, Customer comment,Items count.

Step 18. Set the Send an email to other customers from the group (if provided). Check the box if you want to send an email to a customer from the group.

Step 19. Enter the Subject of an email to a customer from the group. Specify the subject of the letter that will be sent to the customer from the group (up to 100 characters). For example, ‘Appointment notification’. You can also use placeholders.

Step 20. Enter the Message to a customer from the group. Use the text editor to edit the email message. To insert a placeholder directly related to the client or service data, use the special buttons :
Service Name, Customer Name, Group Customer Name, Booking date, Booking time, Customer phone, Customer email, Customer comment,Items count.

Step 21. Set the Send administrator an email (on booking). Check the box if you want to send an email to an administrator on booking.

Step 22. Enter the Attach iCal file to the notification (admin) .Self-explanatory.  Notice: the time zone in iCal file will be the same as in the Webba timezone setting

Step 23. Enter the Subject of an email to an administrator (on booking) . Specify the subject of the letter that will be sent to the administrator (up to 100 characters). For example, New appointment booking.

Step 24. Enter the Message to an administrator (on booking). Use the text editor to write the email message. To insert a placeholder directly related to the client or service data, use the special buttons :
Service Name, Customer Name, Booking date, Booking time, Customer phone, Customer email, Customer comment, Items count.

Step 25. Set the Send administrator an email (on payment received)  Check the box if you want to send an email to the adninistrator on payment received.

Step 26.  Set the Subject of an email to an administrator (on payment received) You can compose a sentence with the available placeholders: #appointment_time, #appointment_day, #service_name

Step 27. Set the Message to an administrator (on payment received) Use the text editor to edit the email message. To insert a placeholder directly related to the client or service data, use the special buttons : 

Service Name, Customer Name, Booking date, Booking time, Customer phone, Customer email, Customer comment, Items count, and so on.

Step 28. Send customer an email (on payment received)  Check the box if you want to send an email to the customer on payment received.

Step 29.  Set theSubject of an email to a customer (on payment received) You can compose a sentence with the available placeholders: #appointment_time, #appointment_day, #service_name

Step 30. Set theMessage to a customer (on payment received) Use the text editor to edit the email message. To insert a placeholder directly related to the client or service data, use the special buttons : 

Service Name, Customer Name, Booking date, Booking time, Customer phone, Customer email, Customer comment, Items count, and so on.

The steps below describes the reminders options. Reminders are daily notifications about the tomorrow’s appointments sent to an administrator of service and to a customer.

Step 31. Check the Send administrator reminders if you’d like to send daily reminders to the administrator.

Step 32. Enter the Subject of administrator reminders. Specify the subject of the letter that will be sent to the administrator (up to 100 characters). For example, ‘Agenda’.

Step 33. Enter the Administrator reminders message. Use the text editor to write the email message. To insert the agenda use the button Agenda for tomorrow.

Step 34. Check the Send customer reminders if you’d like to send daily reminders to the customer.

Step 35. Check the Set the date of sending for customer's reminders Choose between the following options :;1 - tomorrow, 2 - day after tomorrow, 7 - one week before

Step 36. Enter the Subject customer reminders. Specify the subject of the letter that will be sent to a customer (up to 100 characters). For example, ‘Appointment reminder’.

Step 37. Enter the Customer reminders message. Use the text editor to write the email message. To insert a placeholder directly related to the client or service data, use the special buttons :
Service Name, Customer Name, Booking date, Booking time, Customer phone, Customer email, Customer comment, Items count.

Step 38. Set the Time of a daily reminder

IMPORTANT!
To send reminders exactly in time, specified in the Time of a daily reminder you need to setup hourly cron in your hosting with the command like /usr/bin/wget -O – -q -t 1 [PATH TO YOUR WORDPRESS WEBSITE]/wp-cron.php?doing_wp_cron
A command may be different on different hosting platforms. If you need help with cron setup, please contact us: support@webba-booking.com.

Step 39 Choose whether you want to send an invoice or not, and if so, on booking,approval. or on payment complete.

Step 40. Enter the Invoice email subject. Specify the subject of the invoice that will be sent to the customer. For example, ‘Invoice for your booking’. You can also use placeholders.

Step 41. Current invoice number.
Set the initial number of invoice. Placeholder for notifications: #invoice_number Each time a customer pay with PayPal or Stripe, the value of this option will be increased by one.

Step 42. Send copies of invoices to administrator

Step 43. Enter the From : name

Step 44. Enter the From : email

Step 45. Send copies of service emails to. This option is like a super-admin email, on each booking, a notification will be sent to the declared email.

Step 46. Set the Link to the page with Webba Booking form. This page will be used as a landing for payment or cancellation. If you use multiple pages with different booking forms, simply create a dedicated page for that purpose. (Mandatory only if you use the payment or cancellation options).

Since version 3.03, Webba Booking allows you created unlimited Email templates and assigned them to selected services. More information about here.

Since version 3.1.7, you can now use custom fields as placeholders in your email templates and in setting> Email notifications. The principle is simple, you take the id of your custom field (eg id: custom-field1) and paste it to #field_.
# Field_custom-field1 will be identified as any other placeholder available in your editor.

---

Mode settings

---

Step 1. Open Mode tab.

Step 2. Set the Mode : Extended or Basic. In the extended mode the client sets the maximum number of settings related to the suitable booking time, and as a result gets several dates to choose from and different time options for each day. In the basic mode, the user selects a particular date and gets to select the time that is available for this day.

Step 3. Multiple bookings in one session. Enable this option if you want to allow customers to chose several timeslots in one session.

You can choose between two ways of presenting the checkout, with a button in the top bar or directly on the time slot. Enabled (top bar checkout button) or Enabled (time slot checkout button)

Step 4.  Set the Maximum amount of bookings in one session. 
The amount of time slots allowed to your customers to reserve at a time
.If you leave empty, you authorize an unlimited number. If you set a quantity, it will apply to all services. If you want different quantities depending on the services, leave there empty and set in each of them.

Step 5. Enable Skip time slot selection 
If your service schedule includes ONLY ONE time slot available per day.

Step 6. Set Mode of multiple places selection  (3 possibilities)
Case 1, you let the user define how many, till the maximum amount of bookings in one session.
Case 2, you allow to select only one place.
Case3, you allow to select only the maximum of places.

Step 7. Set the  Time hole optimization 
Enable it in the case you are using the auto lock, services with different duration and step less than duration. Enabling this option allows removing possible holes in the schedule.

Step 8.  Show service description 
Enable this option if you want to show the service description under the selected service field.

Step 9. Date input Select the way you want to display the datepicker in your form, through a popup or as a drop-down menu.

Step 10. Count of dates in the dropdown
Set the number of dates you want to display in the dropdown.

Step 11. Show locked time slots as booked . Enable it if you wish to display the booked the time slots marked as booked.

Step 12. Allow using attachments Enable or disable attachements.

Step 13. Attachments file types
Example: file_extension. A file extension starting with the STOP character, e.g: .gif, .jpg, .png, .doc

Step 14. Allow using the service id in url This option handle using service id in url. If this last is enabled, you can add service id to the url of booking page. for example example.com/booking?service=1 will show booking form for service 1 (works same as service in shortcode).

Step 15. Use this option to show the night hours time slots on a previous day. For example, if we set 2 in this option, the time's slots before 2 AM will be shown on the previous day.

Step 16. Limit date range for multi-service mode
The number of days from today that available for booking. IMPORTANT: this option is for multi-service booking only

Step 17. EU GDPR Compliance. Enable this option to clean up database after after the appointment time has passed

Step 18. Allow book ongoing time slot. Allow booking even if the time slot is already started.

Step 19. Default number of days shown in extended mode.
To determine the number of days to display in multiple mode in the form. By default, it's three. You can opt according to the limits indicated in the Service. Low limit for multiple mode and Limit for multiple mode.

---

Translation settings

---

Step 1. Open Translation tab.

Step 2. Enter message translation for different areas of front-end.

Since version 3.1.8, many placeholders (shown in italics below the fields) are available and can be used directly in your translations.

Thanks to this improvement, you can really personalize your Booking done message, the one that appears after the form is sent.

---

Appointments

---

Step 1. Open Appointments tab.

Step 2. Set the Auto lock appointments.
Enable this option to switch on the connection between the services. This automatically locks the time slots of all the services on booking.
For example, few service providers use one equipment, in this case, it will be logical to make the service unavailable for booking on certain time if one of the services was booked at this time.
Auto lock is independent of duration or business hours because the algorithm analyzes the intersections between time slots.

Step 3. Set Perform autolock on. This option defines the scope for the auto lock. To use service in the same categories you need to define categories.

Step 4. Set Autolock for group booking services. This option manages how the auto lock works on servicers with more than one places per time slot. If you chose lock time slot the entire time slot will be locked. If you chose reduce the count of available places the count of available places in connected services will be reduced by the count of current booking count of places.

Step 5. Set Default appointment status. This option defines the default status of the new appointments booked at front-end.

Step 6. Set Allow payments only for approved appointments. Enable this option if you want to allow online payments only for approved appointments.
Important: if you enabled this option, please, pay attention to set up email notification on approval and insert the payment link into the email message. Do not enable this option if the Default appointment status is "Approved".

Step 7. Set Delete expired (not paid) appointments. Use this option to automatically delete not paid appointments after the expiration time. The expiration time can be assigned from the booking moment or from the moment of approving, there are two options to define it.

Step 8. Set Delete expired appointments with started but not finished transaction. Enable this option if you want to auto-delete appointments with started (but not finished) transactions.
IMPORTANT: if you choose Delete appointments with started transaction, expired appointments will be deleted even if a customer started (and not finished) the payment (initialized transaction).

Step 9. Set the Expiration time (in minutes) of appointments. The minimum value is 10.

Step 10. Set the Cancellation buffer (in days). To make cancellations impossible from a certain time before the appointment / reservation.

Step 11. Set Allow cancellation of paid appointments: Enable this option if you want to allow CUSTOMERS to cancel paid appointments.

Step 12. Allow only one appointment per slot from email. 
Do not allow more than one booking per time slot for given customer’s email. To use for services with more than one seat per time slot to avoid double-booking.

Step 13. Allow only one appointment per service from email
If set to enabled, only one appointment can be done per service for a given customers email.

Step 14. Delete pending appointments
Set a given time to automatically eliminate pending appointments.

Step 15. Limit per time. Maximum number of available bookings at given time. Leave empty to not set this limit

Step 16. Lock time slot if at least one place is booked.
Used for services with several places per time slot. Example: A service has 5 places per slot. If someone books 2 places and the service set to use this locking rule, the left 3 places would be unavailable. In this option, we set services that use the rule or leave empty.

---

Paypal settings

---

Step 1. Open PayPal tab.

Step 2. Set the PayPal mode (Sandbox or Live). We highly recommend you to test payments with the Sandbox before going live.

Step 3. Set sandbox and live credentials. For more information, follow the PayPal Setup section of this documentation.

Step 4. Set the PayPal currency.Step 5. Set the tax. This is a percentage of a subtotal amount (price of the booked service).

Step 6. Set Hide address to enabled if you want to show it at checkout.

Step 7. Set Redirect to page when payment is successful if you wish to deliver the successful payment message on a different page.

---

Google calendar

---

Step 1. Open Google calendar tab.

Step 2. Fill the fields with out Google Client ID and Secret.

Step 3. Refresh cache after

Step 4.  "Created by" property for the events 

Step 5. Customer's time zone
Choose which Time Zone to use for Google calendar, Webba's or customer's one.

Step 6. When add events in admin calendar. Choose when to add events in administrator's Google Calendar

Step 7. Synchronization of group services:
This option defines how the backward synchronization works with service with multiple places per time slot - lock whole time slot or reduce the number of available places.

---

Backend interface

---

Step 2. Set the Customer name in the backend.
Use this option if you need show custom fields near customer name in the appointments table and in the schedules.
Example: #name #field_lastname
The example above show how to show customer's name and last name. The last name is stored in the custom field with id "lastname" in this example.
Note, it's necessary to include #name placeholder into the value of this option.

Step 1. Open Backend interface tab.

Step 2. Set the Customer name in the backend.

Use this option if you need show custom fields near customer name in the appointments table and in the schedules.
Example: #name #field_lastname
The example above shows how to show customer's name and last name. The last name is stored in the custom field with id "lastname" in this example.
Note, it's necessary to include #name placeholder into the value of this option.

Step 3. Set the Date format (backend).
Date format used for backend.

Step 4. Set the Format of timeslots in the Schedule page). Choose what do you prefer to display: only the start time or the start and end time of the booking.

Activation settings

---

Step 1. Open Activation tab.

Step 2. Enter the Purchase code. Copy the code that you received while purchasing the plugin into this field.

Step 3. Click Save changes button.

What’s left to do?

---

When setup is done, you need to create at least one Service. Explanation of Service is given in Key concepts section of this doc. To get information about how to manage services, see Services management section. Also, you need to add booking form to the page (post) of your website (see Adding booking form section ).

APPEARANCE CUSTOMIZATION

---

To work with the appearance you need to go to the Appearance page :

Webba Booking allows you to customize your booking form completely. You choose from the 80 available presets that you can use as it is or change to the design of your website.

Step 1. Choose a preset from the drop-down list on the top left and click load presets for loading it.

Step 2. Click on Show preview on the top right to get an idea of the design from the last loaded preset from the previous step.

Actually, the pop-up will display the design of the booking form :

Let’s say you are satisfied with one preset you selected in the list, then the appearance setup is done for you. Click the Save options button and the design will be automatically applied to the front end.

Unfortunately, you do not find what you want or maybe, you wish to quickly apply your graphics?Step 3. Browse all tabs and apply your CSS parameters to arrange the form to your design (Click Show preview button to see your changes).

Step 4. Once you arrive at a satisfactory result, just click Save options button and you’re done with your Appearance setup.

SERVICES MANAGEMENT

---

To work with the Services go to the Services page of the plugin :

Adding a Service

---

To add a new Service you need to do the following steps :

Step 1. Click the Add service button under the services table :

Step 2. Enter the Name of the service.

Step 3. Enter the Description of the service.

Step 4. Enter the Email of the service. This last will be used for sending notifications about bookings of the appointments.

Step 5. Enter the Maximum booking count per time slot. If you set 1, the plugin works in an individual booking mode, if you set more than 1 (2 – 1000000), the plugin works in the group booking mode. Group booking is suitable if your service offers several places at one time.Important : we recommend to set this parameter on service creation and not after the users have booked the appointments.

Step 6. Enter the Minimum booking count per time slot.This option sets the minimum number of group reservations.

Step 7. Priority. This option allows you to order the services in the booking form.

Step 8. Enter the Duration. This is the duration of the appointment in minutes. By default, it is set for 30 minutes. Only numbers should be entered in this field.Note: if you change the Duration parameter after the users have booked the appointment, the duration of the appointments for these bookings will be the same.

Step 9. Enter the Gap. This is the gap between appointments. By default, it is zero. Only numbers should be entered in this field.

Step 10. Enter the Step. This is the number of minutes that is used to stake your workday into intervals. Step parameter is important while setting your schedule in the backend and while displaying your free time in the frontend. By default, this parameter is equal to the sum of Duration and Gap, and cannot be larger than the sum of these two parameters.Note: We recommend to edit this setting for the services with a large Duration (2 hours or more) in order to provide the user more options while choosing the time. Note: this parameter is available only if you set 1 value for the Maximum booking count per time slot parameter.

Step 11. Set the Available to users. The users who will have access to the service schedule should be entered here. Please note that users with a role of a Subscriber cannot get access to the services. For more information about managing WordPress users, see here.

Step 12. Set Select form. If want to use the CF7 form with the custom fields as Webba Booking form, select it from the list, in other case set the default value. For more information about the custom fields, click here.

Step 13. Set the price parameter (just amount without currency). Leave zero if you don't use online payments.

Step 14. Select the payment method you want to be available for the service.

Step 15and 16. Select the email templates. If you leave them set as default, settings from Email notifications will be used.

Step 17. Select the Email template you wish to use for invoicing.

Step 18.. Preparation time (days). 0 means no preparation time, 1 means today, 2 means today and tomorrow, and so on...This option make thoses days unavailable to choose as date of booking.

Step 19. Set the  Availability date range
If the service is valid for a defined period of time. Leave empty to set unlimited.
 Note: If the start date is the same as the end date, the selection date step will no longer be available when the client makes an appointment.

Step 20. Set the  Google calendar
Select the one you wish to use. More information on how to prepare and synchronize a service with a google calendar in the dedicated chapter.

Step 21. Set the  Low limit for multiple mode.

Step 22. Set the  Limit for multiple mode
This is the maximum number of time slots a customer can select in a reservation session.

Step 23. Set the Business hours. You need to check the boxes for those days that are working ones for the service. Setting the time is also necessary. If there is a break in the work of the service, you specify two gaps, such as from 9am to 1pm and from 2pm to 6pm. If the break is not used, you specify a gap (the first) and delete the second gap by clicking the ‘delete the second gap’ link. After the removal of the gap, if necessary, it can be returned by clicking on add a second gap.

Step 24. Click Save button.

The service will be added and displayed in the table of services

Editing the Service

---

To edit the Service you need to do the following steps :

Step 1. Check the box of the service in the table.

Step 2. Click Edit Service button.

Step 3. Edit this Service settings. For more information about the Service Settings see previous part of this chapter.

Step 4. Click Save button.

Deleting the Service

---

To delete the service, you need to do the following things :

Step 1. Check one or more services in the table.

Step 2. Click Delete button.

Step 3. Confirm the deletion in the appearing dialog box.

Note: the data on all bookings that were made in the framework of this service is deleted along with the service.

---

Service categories

Since version 3.1.1 you can group your services into categories. With categories you can setup the shortcode to display only services from those or another category on front-end. This feature also can be used to limit the scope of autolock.

To work with the categories, you need to go to the Service categories page :

Create a category

---

Click new to create a new categorie.

Step 1. Give it a name that is self-explanatory to remember its function and use.
Step 2. Select the services you want to include in this last.
Step 3. Click save

Edit a Category

---

Step 1. Click on the edit icon

Step 2. Update the content and/or the name as needed.
Step 3. Click Save.

Delete a Category

---

Step 1. Click on the delete icon.

Step 2.> Click on Delete button to confirm your operation.

Email templates

---

When you create a Service, email notifications and reminders templates used are the default ones that you find in General > Email notifications tab. Perhaps for reasons specific to your business, you have templates needs related to Services, to personalize your communication at best. In this section, you can create as many templates as you want.
Then simply assign them when you create or edit your Services (Services page) like below  :

To work with the Email templates, you need to go to the Email template page :

Create an Email template

---

Click new to create a new template.

Step 1. Give it a name that is self-explanatory to remember its function and use.
Step 2, Write content specific to the use of a Service.
Step 3. Remember to also use the template variables as needed.


Then click Save.

Edit an Email template

---

Step 1. Click on the edit icon:

Step 2. Update the content and/or the name as needed.
Step 3. Click Save.

Delete an Email template

---

Step 1. Click on the delete icon.

Step 2.  Click on Delete button to confirm your operation.

WORKING WITH THE APPOINTMENTS

---

Understanding the appointment booking status

There are five status available for booking in our plugin:
1. Awaiting approval. Means booking is not paid and not approved by service administrator.
2. Approved. Means booking is approved by administrator but not paid.
3. Paid (awaiting approval). Means the booking is paid, but not approved by service administrator.
4. Paid (approved). Means the booking is paid and approved by administrator.
5. Arrived - The customer has arrived. This status can be set by the service administrator.
The default status, assigned to new appointment booked at front end can be Awaiting approval or Approved. For more information about default status, please, take a look Getting Started > Appointments

To work with the appointments you need to go to the Appointments page:

Set the filters (date range and services) to display appointments:

You can also select all services or services from a category.

Appointments will be presented in the table:

To sort the rows click on the column title.

To view canceled appointments, click on the following link to shows them in their separate table.

Add an appointment

---

Step 1. Click on Create new

Step 2.  Complete the form and click save

Edit an appointment

---

Step 1. Click on the icon to open the item

Step 2. Change the data you want and click save.

Delete an appointment

---

Click on the icon, then confirm your deletion by clicking on he blue Delete button.

Working with the schedules

---

To work with the schedules you need to go to the Schedule page :

Note that the Schedule page is available to all users with the administrator rights and also to those users who gained access to at least one service while editing the service’s properties (see services management).

Loading a schedule

---

To load a schedule you need to click on the button with the name of the service for which the schedule needs to be displayed :

As a result, a schedule for the current week will be displayed. To view the schedule for the following week you need to click the Show next week button at the bottom of the schedule.

Close the day

---

Makes a day unavailable for booking. To perform this operation you need to click on the Close under the title with the date.

Note that if the day that you close already has a booked appointment, it’ll remain active.

Open the day

---

Lets a date be available for booking. Is used in the case when you need to make a holiday a working day or in the case when the date which was previously closed for booking by using the Close the day function, needs to be open for booking again. To perform this operation you need to click on the Open under the title with the date :

Close the time

---

Lets you close a certain time on a certain date for booking. Click the icon with unlocked padlock on time slot you want to close to perform this operation :

Open the time

---

Lets you open the time which was previously closed for booking with the help of the function Close the time. Click the icon with locked padlock to perform this operation :

Adding an appointment

---

This function allows the administrator to add an appointment manually. Can be used in the case when the customer didn’t book an appointment on the website but booked an appointment through other means, for example, by phone.

To add an appointment you need to do the following steps :

Step 1. Click the icon with + symbol on the time slot :

Add appointment dialog will be displayed.

Step 2. Enter the Name of the customer.

Step 3. Enter the Email of the customer.

Step 4. Enter the Phone of the customer.

Step 5. Enter the items count
(available if the service max. items per time slot parameter is more than 1).

Step 6. Enter the Custom data (optional)

Step 7. Enter the Comment (optional)

Step 8. Click Add button.

View the details of the appointment

---

If the time is booked, the client’s name will be displayed to the right of the time. To see the details of your booking, you need to click on the name :

In the dialog box you will see the details of the booking :

Deleting the appointment

---

To delete the appointment you need do the following steps :

Step 1. Click on the name :

Step 2. Click Delete appointment button :

Schedule tools

---

– Date auto lock / unlock

Date auto Lock and Date auto Unlock are tools that allow you to lock or unlock any date range in one go and to exclude chosen dates from inside this range.

In the Date auto Lock example below, we have selected the test service schedule, locked the dates from 01/11/2016 to 11/30/2016 and excluded the Wednesday of the month. (11/02 / 2016.11 / 09 / 2016.11 / 16 / 2016.11 / 23 / 2016.11 / 30/2016)

To validate this selection with exclusions and effectively implement them in the selected schedule, click on Start

– Time slot auto lock / unlock

Time slot auto lock and Time slot auto unlock are tools that allow you to lock or unlock any ranges of time slots in a given range of dates.
To perform auto lock / unlock you need to:
Step 1. Click the button Time slot auto lock
Step 2. Select a service or a category
Step 3. Set the range of dates.
Step 4. Set the range of time slots.
Step 5. Click the Start button.

SHORTCODES

---

Adding booking form shortcode

---

To add a booking form to a page or post, you need to do the following steps 

Step 1. Open page (post) for edit.

Step 2. Check if current editing mode is Visual.

Step 3. Click Webba Booking form button.

Step 4. In the dialog box select the service for which you would like to display a form, or choose the All services option. In the later case, the choice of the service will be done by the customer on booking.
Also you can set a category: in this case there will be only services from the category you've set in the booking form.  Or choose the All categories option. In this case, the choice of the category  will be done by the customer on booking.

Step 5. Click Add button.

Step 6. Update page (post).

---

Adding Email landing shortcode

---

This shortcode is used for payments and cancellations, to display these processes on a dedicated landing of which you will specify the url in the Link to the page with Webba Booking form field of Settings> Email notifications

To add an email landing shortcode  to a page or post, you need to do the following steps

Step 1. Open page (post) for edit.

Step 2. Check if current editing mode is Visual.

Step 3. Click Webba Booking Email landing button.

Step 6. Update page (post).

Here some examples of manual shortcode usage:

---

Display list of categories

---

If you group your services into categories, you can then display the list of categories with the following shortcode: [webba_booking category_list="1"]

Your customer will be prompted to select the category first and then select a service.

WORKING WITH CUSTOM FIELDS

---

Since version 1.2 Webba Booking is integrated with Contact Form 7. You can create forms with an unlimited amount of custom fields in the CF7 form editor and use created forms as Webba Booking form. To create a form with custom fields, please do the next steps :

Step 1. Create a new form in the CF7 form editor (CF7 documentation is available at http://contactform7.com/docs/). The current version of Webba Booking plugin supports the following CF7 input fields :

CF7 Field type	Webba Booking class	Validation
text	wbk-text	Required / not required
checkbox	wbk-checkbox-custom	Required / not required
select	wbk-select	Required / not required
textarea	wbk-textarea	Required / not required
file	wbk-file	Required / not required

For the correct work you need to include 4 basic fields : Name, Email, Phone, Comment. Below is the example of basic contact form that will work with Webba Booking :

<p><label for="wbk-name">Your First Name (required)</label>[text* wbk-name class:wbk-text id:wbk-name]</p>
<p><label for="wbk-email">Your Email (required)</label>[text* wbk-email class:wbk-text id:wbk-email]</p>
<p><label for="wbk-phone">Your phone (required)</label>[text* wbk-phone class:wbk-text  id:wbk-phone]</p>
<p><label for="wbk-comment">Your comment</label>[textarea wbk-comment class:wbk-textarea id:wbk-comment]</p>

It’s important the next names for the fields : wbk-name, wbk-email, wbk-phone, wbk-comment.

Now let’s add a custom field with the “text” type. The code of this custom field type is :

<p><label for="custom-field1">Custom field 1</label>[text* custom-field1 class:wbk-text  id:custom-field1] </p>

You can add this code to your custom from directly or use CF7 form editor buttons to insert the fields. Adding class is necessary, if you don’t specify the class, Webba Booking wouldn’t process this field.

To add the select box to the form, insert the next code :

<p><label for="custom-field2">Custom field 2</label>[select custom-field2 id:custom-field2 class:wbk-select "option 1" "option 2" "option 3"]</p>

For the second custom field, we used class wbk-select.

As the third custom field, let’s add the checkbox field :

<p><label for="custom-field3">Custom field 3</label>[checkbox custom-field3 class:wbk-checkbox-custom id:custom-field3 "option1" "option2" ]</p>

The final code of our booking form is :

<p><label for="wbk-name">Your First Name (required)</label>[text* wbk-name class:wbk-text id:wbk-name]</p>
<p><label for="wbk-email">Your Email (required)</label>[text* wbk-email class:wbk-text id:wbk-email]</p>
<p><label for="wbk-phone">Your phone (required)</label>[text* wbk-phone class:wbk-text  id:wbk-phone]</p>
<p><label for="wbk-comment">Your comment</label>[textarea wbk-comment class:wbk-textarea id:wbk-comment]</p>
<p><label for="custom-field1">Custom field 1</label>[text* custom-field1 class:wbk-text  id:custom-field1]</p>
<p><label for="custom-field2">Custom field 2</label>[select custom-field2 id:custom-field2 class:wbk-select "option 1" "option 2" "option 3"]</p>
<p><label for="custom-field3">Custom field 3</label>[checkbox custom-field3 class:wbk-checkbox-custom id:custom-field3 "option1" "option2" ]</p>

All examples above uses labels, it’s important to use correctly “for” argument for the custom fields, because label texts are used as a data description for the custom fields.

If you need to add acceptance field add the following code :

<p>[acceptance wbk-acceptance]Check the acceptance field <span class="wbk-acceptance-error" style="display:none;" >acceptance not checked</span></p>

Step 2.

Go to the Services page

Open the service for edit or create new service and select the form :

---

Attachment in custom forms

In order to work with attachcement, you need to set the two following options you will found in Mode tab of Settings page.

Allow using attachments (enable or disable attachements).

Attachments file types (set the file type of file input control).

Example of file field in the custom form:

<p><label for="wbk-file">Your attachment</label>[file wbk-file-1 class:wbk-file id:wbk-file-1]</p>

Important: class:wbk-file is required, id is required.

---

---

Service parameter in url

Settings page > Mode tab - Allow using the service id in url 

---

Customer group fields

Since version 2.2.0, Webba Booking supports sending emails not only to the administrator or to the customer who is booking, but also to other people provided in custom fields. The feature can be useful if an appointment is for two or more people. To send email notification to another person you need to add two custom fields for name and email and mark them as used for sending notification by setting the id of fields to :
wbk-secondary-name_x, wbk-secondary-email_x, where x is any digit unique to this customer fields.

The code below demonstrates the use of custom fields for providing name / email for two additional customers and one main customer who is booking :

<p><label for="wbk-name">Your First Name (required)</label>[text* wbk-name class:wbk-text id:wbk-name]</p>
<p><label for="wbk-email">Your Email (required)</label>[text* wbk-email class:wbk-text id:wbk-email]</p>
<p><label for="wbk-phone">Your phone (required)</label>[text* wbk-phone class:wbk-text  id:wbk-phone]</p>
<p><label for="wbk-secondary-name_1">Partner name</label>[text* custom-field1 class:wbk-notify-name_1 class:wbk-text  id:wbk-secondary-name_1]</p>
<p><label for="wbk-secondary-email_1">Partner email</label>[text* custom-field2 class:wbk-notify-email_1 class:wbk-email-custom  id:wbk-secondary-email_1]</p>
<p><label for="wbk-secondary-name_2">Partner name 2</label>[text* custom-field3 class:wbk-notify-name_1 class:wbk-text  id:wbk-secondary-name_2]</p>
<p><label for="wbk-secondary-email_2">Partner email 2</label>[text* custom-field4 class:wbk-notify-email_1 class:wbk-email-custom  id:wbk-secondary-email_2]</p>

---

Contact Form 7 Dynamic Text Extension

Since version 3.0.4 Webba Booking supports Contact Form 7 Dynamic Text Extension.

For example, to use dynamic fields in your forms, please, use the shortcode:

“CF7_POST key=’customer_name'”

After that, if you set the parameter to your URL of booking form like

your_booking_page.html?customer_name=Eric

customer name field will be auto-filled.

The Paypal Setup

---

To accept online payments with Paypal, you need a PayPal Business account and the API credentials.

To setup your PayPal, please, do the following steps :

---

Step 1. Login to developer.paypal.com and click the dashboard button :

---

Step 2. Click the My Apps & Credentials :

---

Step 3. Scroll to REST API apps and click the Create App button

---

Step 4. Enter the App Name (for ex. Webba Booking App) and click the Create App button :

---

Step 5. There are two sections for settings – Sandbox and Live. There is no difference in setup, but keep in mind that Live won't run if your website is running on localhost. To switch between Live and Sandbox click the button :

We highly recommend you to test payments with the Sandbox before going live.

---

Step 6. Leave the settings as they are and grab the ClientID and Secret for Sandbox and Live. Then add them to your Webba Booking Settings in Paypal tab and voila!

---

The Stripe Setup

---

To accept online payments with Stripe,  you need a Stripe account and the API credentials.

To setup your Stripe, please, do the following steps :

---

Step 1. Login to your Stripe dashboard account.

Step 2. Click on API in the menu on left.

Step 3. Copy/paste on a bloc note your Publishable key.

Step 4. Copy/paste  also on a bloc note your Secret key.

---

---

Step 5. Go to your Wordpress dashboard. In Settings page, click on Stripe tab and paste there your credentials you just saved on your bloc note.

---

Step 6. Setup your Currency.

Step7. Load Stripe javascript 
Stripe requires a javascript loaded from their host.

Step 8. Override Stripe card element error messages 
Stripe card input has its own error handling with own messages If you need to override it, set to Yes. The default value is No (do not override).

Step 9. Tax  If needed, put the percentage you wish to apply.

Step 10. Click Save Changes and you are ready to work in test mode!

---

In order to switch to live mode, of course, you need to activate your Stripe account. For this, we invite you to read their documentation for more information.

---

The Woocommerce Setup

---

Step 1. Create a new product with the Simple type and enable Sold individually option. It is not required to set the price because it will be calculated automatically. The name of the product can be whatever you need, for example, Booking.

---

---

Put any price for the product here. It's just the need to put one by default to continue the installation. The final price will be calculated according to the one you have entered in the Service.

---

---

And set the Catalog visibility to hidden.

---

---

Step 2. Open the WooCommerce tab of Webba Settings page and set the id of product we created in the first step:

---

---

Step 3. Open the Service settings (Services > Edit service) and add WooCommerce as payment method:

---

---

That's all!

Coupons

---

In this section, you can create as many coupons as you want and assign them to services

Let's create one!

Step 1. Click on Create new

Step 2. Give a name to your coupon.

Step 3. Set the Usage limit  Define here the number of payments for which your coupon will be applicable. If you leave the field empty, the number of payments will be unlimited.

Step 4. Define the time period for which your coupon will be valid.

Step 5. Choose the service or services for which your coupon may apply.

Step 6. Set the reduction percentage you want to apply or a fixed amount.

Step 7. Click save.

Then, to activate the coupon system in Webba Booking, go to the Settings page on General tab (bottom page) and set Coupons to Enabled.

Placeholders

---

Message placeholders

---

Service name

#service_name

The name of the service you want to display.

Category name

#current_category_name

Represents the category selected by a customer

Category names

#category_names

The name of the category you want to display.

Customer name

#customer_name

The name of your customer.

Booking date

#appointment_day

The selected date of the booking.

Booking time

#appointment_time

The selected time of the booking.

Booking local date

#appointment_local_date

Displays the selected booking date converted to the customer’s time zone.

Booking local time

#appointment_local_time

Displays the selected booking time converted to the customer’s time zone.

Appointment ID

#appointment_id

Displays the identification number of the customer’s reservation.

Customer phone

#customer_phone

Displays the phone number of your customer.

Customer email

#customer_email

Displays the email of your customer.

Customer comment

#customer_comment

Displays the comment left from your customer.

Custom data

#customer_custom

Displays the custom data you defined using custom fields.

Items count

#items_count

Displays the number of items/places reserved.

Invoice number

#invoice_number

The invoice number auto-increased with online payments in Settings > Email notifications tab.

Selected count

#selected_count

Displays the count of time slots booked in Multiple mode

Total amount

#total_amount

The total amount to pay for your customer.

Payment link

#payment_link

The link to direct your customer to the payment page.

Cancel link

#cancel_link

The link to allow your customer the cancellation of his booking.

Agenda for tomorrow

#tomorrow_agenda

Displays all the bookings for the next day. Convenient for the administrator or staff.

Group customer name

#group_customer_name

List of the customers concerned by the booking.

Create loop

[appointment_loop_start][appointment_loop_end]

To use in case you allow multiple booking in one session. Put the date and time in between.

Administrator cancel link

#admin_cancel_link

In case you want to cancel your customer booking. To use in administrator email notification. It may be more convenient in some case.

Administrator approval link

#admin_approve_link

In case you want to approve manually your customer booking. To use in administrator email notification. It may be more convenient in some case.

Customer Google calendar link

#add_event_link

This link will automatically create an event into the Google calendar from your customer.

Booking time range

#time_range

In case you want to display in start-end format the time of the booking.

---

Subject placeholders

---

These are the placeholders you can use in your emails subjects.

Service name

#service_name

The name of the service you want to display.

Category names

#category_names

The name of the category you want to display.

Customer name

#customer_name

The name of your customer.

Booking date

#appointment_day

The selected date of the booking.

Booking time

#appointment_time

The selected time of the booking.

Booking local date

#appointment_local_date

Displays the selected booking date converted to the customer’s time zone.

Booking local time

#appointment_local_time

Displays the selected booking time converted to the customer’s time zone.

Appointment ID

#appointment_id

Displays the identification number of the customer’s reservation.

Customer phone

#customer_phone

Displays the phone number of your customer.

Customer email

#customer_email

Displays the email of your customer.

Customer comment

#customer_comment

Displays the comment left from your customer.

Custom data

#customer_custom

Displays the custom data you defined using custom fields.

Items count

#items_count

Displays the number of items/places reserved.

Total amount

#total_amount

The total amount to pay by your customer.

Group customer name

#group_customer_name

List of the customers concerned by the booking.

Create loop

[appointment_loop_start][appointment_loop_end]

To use in case you allow multiple booking in one session. Put the date and time in between.

Booking time range

#time_range

In case you want to display in start-end format the time of the booking.

Google calendar

---

Overview

---

Since the version 3.2.0, you have the ability to connect calendars with different users and assign to each service an unlimited number of calendars. Thus, the data on reservations can come in an unlimited number of Google calendars.

Opportunities and limitations of integration with the Google Calendar:

Send data about appointment/reservation to Google Calendar	+
Multiple calendars	+
Automatic update of data in Google Calendar when updating data in Webba Booking	+
Automatic update of data in Webba Booking when updating data in Google Calendar	-
Automatic deletion of data in Google Calendar when deleting data in webba booking	+
Access for employees to authorize calendars	+
Considers events added in the google Calendar by blocking the time slots that cover those events 'length	+

---

Google API setup

---

---

---

---

If you already have projects, click on the top left, in our example, it is Webba Booking.

---

---

A window will open, then click on the +

---

---

---

1– Once the project is created, click again in the same place to select your new project, here it’s called 2018.
2 -Scroll down to Getting Started section and click on Enable APIs and get credentials like keys.

Give your project a name and click Create

---

---

---

Click on ENABLE APIS AND SERVICES

---

---

Scroll down and click on Calendar API

---

---

Click on ENABLE

---

---

Click on Create credentials

---

---

Click on Client ID

---

---

Click on Configure consent screen

---

---

Complete with an application name (i.e. “Webba Calendar”) and click Save. Others fields are optional.

---

---

Click on Credentials tab

---

---

Click on Create Credentials and Choose OAuth client ID

---

Select Web application, enter the client name (i.e. Web client 1) and click Create

---

---

Copy the client ID and client secret somewhere (you will need it when setup Google Calendar in Webba Booking)

---

---

---

---

Google Calendar setup in Webba Booking

---

Setup Credentials

---

Open Webba Booking settings page

---

---

Open the Google Calendar tab, paste the Google API Client ID and Google API Client Secret and click Save Changes.

---

---

Add a new calendar

---

Open the Google Calendar page

---

---

Click Create new

---

---

Set the name of calendar (i.e. “My first calendar”). This name can be arbitrary and used to identify the calendar.

If you need to give an access to this calendar to another (not administrator user) select the user in the “Give access to this calendar to”. Use this option if it’s required to authorize the calendar by the person that doesn’t have administrator role in your WP.

---

Set the calendar id

---

In order to complete this, you need to create a calendar in your Google Calendar page.

---

---

Click New calendar and give a name to this last. Then click Create Calendar.

---

---

Your Google Calendar should be now displayed in your calendar list.

---

---

Hover over the name of your calendar and click on three points to access to its settings.

---

---

Copy the Calendar ID.

---

---

And paste it in the form you opened just before in your dashboard and save.

---

---

Manage calendar authorization

---

Authorization by administrators

---

Open the Google Calendar page

---

---

NOTE: after adding the URL to client settings you need to wait around 5 minutes.h

Click Authorize button

---

---

Click on Allow

---

---

Authorization by non administrators

---

Open the Google Calendar page.

---

---

Click on Manage authorization for the calendar you want to authorize

---

---

Click on Authorize button

---

---

Click on Allow

---

---

Remove authorization

---

То remove, you need to click on Manage authorization  (see previous part)

Click on Remove authorization

---

---

Delete a calendar

To delete a calendar, click on the delete icon

---

---

Confirm deletion by click on Delete button

---

---

Edit a calendar

---

To edit a calendar, click on the edit icon

---

---

Set the fields and click Save

---

---

Note: You can choose between One-way or Two-way synchronization. One-way will add automatically bookings to your Google Calendar. Two ways mean every time you put something directly on your Google Calendar, the corresponding time slots in your Webba schedule (those that covers the time you defined here) will become unavailable for booking (here no data is imported).

---

Manage the event wording

---

To set the summary and description of a Google Calendar event, open the Settings page

---

---

Open the Translation tab and scroll down

---

---

Set the Google calendar event summary

Available placeholders are the following:

---

---

Set the Google calendar event description

Available placeholders are the followings:

---

---

Setup a service to send data to Google Calendar

Open the Services page

---

---

Open the service for edit

---

---

Select the calendar

---

Save the service

---

Give customers the option to add their appointments on their google calendar

---

Step 1. Copy your  Link to the page with Webba Booking shortcode (from Settings >  Email notification tab) to 

---

---

Step 2. Add this in your google console below the one allready pasted from Authorized redirect URIs step

---

---

Step 3.  Add the #add_event_link placeholder in the email sent to the customer (Settings > Email notifications)

---

Step 4.  Set the "Google calendar event summary (customer)" and "Google calendar event  (Settings > Translation)

---

---

Step 5. Make a reservation test and try to add to your google calendar, by the link received in the notification to verify that all works well.

The Webba booking Api

---

Since the version 2.2.2, Webba Booking has a JavaScript API.

wbk_on_booking

---

Syntax

wbk_on_booking( service, time, name, email, phone, desc, quantity );

---

Parameters

service – numeric id of the service booked.
time – time of appointment in UNIX timestamp format.
name – name provided by a customer.
email – email provided by a customer.
phone – phone provided by a customer.
desc – description provided by a customer.

---

Description

This function is called on the successful response on booking. You can use it to perform actions like redirect, analytics tracking, changing HTML, custom output etc.

---

Where should I declare this function?

It does not matter where you put the declaration. You can put it in your theme files or use an external plugin for custom js code. The only one thing to pay attention is – make sure that you won't lose your custom js code after updates.

---

Example of code for page redirect on submission

function wbk_on_booking( service, time, name, email, phone, desc, quantity ){ window.location = "http://example.com/example.html"; }

Translation

---

Most of the frontend wording is translatable at Translation tab of the Settings page.

If the current version of plugin doesn’t include your language, you can create the translation in a few simple steps :

Step 1. Download and install the poEdit editor (download link).

Step 2. Rename the languages/wbk.pot file to wbk-xx_XX.po where xx_XX is your locale (full list of locales available here)

Step 3. Open wbk-xx_XX.po in poEdit and set the translation sentences.

Step 4. Compile the mo-file in poEdit (from the File menu).

Step 5. Upload po and mo files to the languages folder of the plugin.

Step 6. Make sure you’ve set the correct language on the WordPress General Settings page.

LICENCES

---

Used Assets

Here the list of licenses used with Webba Booking :
jQuery Datepicker by Keith Wood (MIT License)
jQuery Masked Input Plugin by Josh Bush (MIT License)
pickadate.js by Amsul (MIT License)
tablesaw by Filament Group (MIT License)
jQuery Mask Plugin by Igor Escobar (MIT License)

---

MIT Licences

Do you want to know more about what are a MIT Licenses, click here.

SUPPORT

---

If you face problems with the installation or customization of our plugin, please do not hesitate to contact us. You will be always welcome.

Moreover, we are very proud to see that people really appreciate our support. Make up your own mind by looking at reviews here.

CHANGELOG

---

Our changelog is regularly updated after each new update of the plugin. So, if you want to know quickly what did change since the last version, you are in a good place.

3.3.68
3.3.63
3.3.51
3.3.42
3.3.34
3.3.23

3.3.15

3.3.12

3.3.11

3.3.9

3.3.8

3.3.7